<template>
    <div class='box'>
      <!-- 顶部搜索框 -->
      <div class="top">
        <b class="left">
          <van-icon name="arrow-left" @click="goBack"/>
        </b> 
        <div class="search">地址管理</div>
        <div class="right"><van-icon name="weapp-nav" /></div>
      </div> 
        <!-- 地址列表 -->
        <van-address-list
          v-model="chosenAddressId"
          :list="list"
          :disabled-list="disabledList" 
          default-tag-text="默认"
          @add="onAdd"
          @addhome="onEdit" 
        > 
        </van-address-list> 
    </div>
</template>

<script>
import api from "../http/api.js";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { onMounted, ref, reactive } from "vue";
import { areaList } from "@vant/area-data";
import { Area, Toast, ConfigProvider } from "vant";
export default {
  setup(props) {
    const store = useStore();
    const router = useRouter();
    const checkOpen = ref(false); //设为默认地址
    const add = ref(false); 
    const searchResult = ref([]);

    const onSave = () => Toast("save");
    const onDelete = () => Toast("delete");
    const chosenAddressId = ref(1);
    // 地址列表
    const list = reactive([]);
    // 超出配送范围的地址列表
    const disabledList = [];
    const onAdd = () => {
      Toast("新增地址");
      add.value = true;
      // 跳转新增
      router.push("/address")
    };
    const onEdit = (item, index) => Toast("编辑地址:" + index);
    const onChangeDetail = val => {
      if (val) {
        searchResult.value = val;
      } else {
        searchResult.value = [];
      }
    };
    // 获取收货地址
    const getAdress = async () => {
      let res = await api.setAdress();
      res.data.data.forEach(item => {
        return (
          (item.name = item.userName),
          (item.id = item.userId),
          (item.address =
            item.provinceName +
            item.cityName +
            item.regionName +
            item.detailAddress),
          (item.tel = item.userPhone)
        );
      });
      list.push(...res.data.data); 
      // console.log(list, res.data.data,);
    };
    // 保存地址
    const addOk = () => {
      console.log("点击保存地址按钮");
    };
    // 返回购物车页面
    const goBack = () => {
      store.commit("setTab", { act: 2, isShow: true });
      router.push("/cart");
    };
    onMounted(() => {
      getAdress();
    });
    return {
      add,
      list,
      onAdd,
      onEdit,
      disabledList,
      chosenAddressId,
      goBack,
      store,
      router,
      addOk,
      areaList,
      onSave,
      onDelete,
      areaList,
      searchResult,
      onChangeDetail,
      checkOpen,
      getAdress
    };
  }
};
</script>

<style lang='scss'>
.box {
  width: 100%;
  padding-top: 120px;
  // 顶部搜索框
  .top {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 15px;
    border-bottom: 1px solid #ddd;
    font-size: 28px;
    // 中间搜索框
    .search {
      width: 80%;
      box-sizing: border-box;
      padding: 15px 0;
      height: 70px;
      text-align: center;
    }
  }
  //   表单区域
  .login {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    .form {
      width: 100%;
      height: 500px;
      padding: 20px;
    }
  }
  //   底部新增地址
  .btn {
    height: 80px;
    color: #fff;
    background: #1baeae;
    border: none;
    border-radius: 40px;
  }
  .van-button--danger {
    background: #1baeae;
    border-color: #1baeae;
  }
}
</style>
